<template>
  <el-dialog :title="title"
             :close-on-click-modal="false"
             :visible.sync="visible"
             v-if="visible"
             width="920px">
    <el-tabs v-model="activeName"
             @tab-click="tabsHandleClick"
             style="padding-bottom: 20px;">
      <el-tab-pane label="会员资料"
                   name="memberinfo"
                   style="padding: 0 20px 0 20px;">
        <!-- :memberId.sync="this.memberDataForm.id" -->
        <member-edit ref="editMember"
                     @setVisible="setVisible"
                     @refreshDataList="refreshDataList">
        </member-edit>
      </el-tab-pane>
      <el-tab-pane label="会员卡"
                   name="cardinfo">
        <card-edit ref="editCard"
                   @setVisible="setVisible"
                   @refreshDataList="refreshDataList"></card-edit>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import memberEdit from '@/components/member/edit'
import cardEdit from '@/components/card/edit'

export default {
  components: {
    memberEdit,
    cardEdit
  },
  data () {
    return {
      id: 0,
      title: '',
      visible: false,
      activeName: 'memberinfo'

    }
  },
  methods: {
    // 设置弹出窗体显示与否
    setVisible (visible) {
      this.activeName = 'memberinfo'
      this.visible = visible
    },
    // 刷新列表
    refreshDataList () {
      this.$emit('refreshDataList')
    },
    // tabs切换是调用此方法
    tabsHandleClick (tab, event) {
      console.log(tab.name)
      if (tab.name === 'cardinfo') {
        this.$nextTick(() => {
          this.$refs.editCard.getCardType()
          this.$refs.editCard.init(this.id)
        })
      }
    },
    // 初始化函数
    init (id) {
      this.id = id || 0
      this.visible = true
      this.activeName = 'memberinfo'
      this.$nextTick(() => {
        this.title = id ? '修改会员资料' : '录入会员资料'
        this.$refs.editMember.init(id)
      })
    }
  }
}
</script>
<style scoped>
div >>> .el-dialog__body {
  padding: 0 20px;
}
</style>